<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Proposal</title>
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<style type="text/css">
body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif";
}

#BGIMGPanel {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	overflow: hidden;
	text-align: center;
	z-index: -1;
}

#WordPanel {
	position: relative;
	width: 400px;
	height: 300px;
	overflow: visible;
	margin-left: 30%;
	margin-right: auto;
	margin-top: 200px;
}

#loading {
	position: relative;
	top: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 800px;
}

div div nobr {
	font-size: 4em;
	color: blue;
	font-style: italic;
}
</style>
<script type="text/javascript">
	function checkMatch() {
		var name1 = $("#name1").val();
		var name2 = $("#name2").val();
		if (encodeName(name1) == "987E6D77534E"
				&& encodeName(name2) == "4EFB73894ED9") {
			return true;
		} else {
			return false;
		}
	}

	function encodeName(name) {
		if (!name) {
			return "";
		}
		var code = "";
		for ( var i = 0; i < name.length; i++) {
			var c = name.charAt(i);
			code += c.charCodeAt().toString(16).toUpperCase();
		}
		return code;
	}

	function checkTime() {
		var deadline = new Date(2013, 5, 9);
		var now = new Date();
		if (now.getTime() >= deadline.getTime()) {
			location.href = 'countdown.html';
		}
	}
</script>
<script type="text/javascript">
	//==========resource loader===============
	var ResourceLoader = {
		total : 0,
		loaded : 0,
		error : false,
		loadResource : function(imgList, callback) {
			this.total = imgList.length + 1;
			for ( var i = 0; i < imgList.length; i++) {
				this.loadImageResource(imgList[i], callback);
			}
			this.loadAudioResource(callback);
		},
		
		loadImageResource : function(url, callback) {
			var loader = this;
			var img = new Image();
			img.src = url;

			if (img.complete) {
				loader.onload(callback);
				return;
			}

			img.onload = function() {
				loader.onload(callback);
			};
			
			img.onerror = function() {
				if (this.error == true) {
					return;
				}
				this.error = true;
				alert("数据载入异常，你可以尝试刷新页面重新载入");
			};
		},
		
		loadAudioResource : function(callback) {
			var loader = this;
			setTimeout(function() {
				loader.loaded += 1;
				if (loader.loaded >= loader.total) {
					callback.call();
				}
			}, 10000);
		},
		
		onload : function(callback) {
			this.loaded += 1;
			if (this.loaded >= this.total) {
				callback.call();
			}
		}
	}
</script>
<script type="text/javascript">
	var BGIMG = [ 'res/1.jpg', 'res/2.jpg', 'res/3.jpg', 'res/4.jpg', 'res/5.jpg', 'res/6.jpg', 'res/7.jpg' ];
	
	var WORDS = [ "这是一个关于爱情的故事", "这是一个关于生活的故事", "这是一个关于人生的故事", "这是属于我们两个人的故事",
			"故事的前半部分是我们各自成长", "我找到了你", "你属于了我", "故事的后半部分在未来", "也许艰难险阻",
			"也许荆棘丛生", "你是否愿意牵着我的手", "让我们共同完成", "共同开辟我们的未来", "属于我们两个人的故事",
			"任玉仙小姐", "你是否愿意嫁给我" ];

	function changeBackground(index) {
		$('#BGIMGPanel').fadeOut("slow", function() {
			//$(this).css('background-image', "url('res/" + (BGIMG[index]) + "')");
			var img = $('#BGIMGPanel img');
			img.attr('src', BGIMG[index]);
		}).fadeIn("slow", function() {
			index = (index + 1) % BGIMG.length;
			setTimeout(function() {
				changeBackground(index);
			}, 5000);
		});
	}

	function showWords(index) {
		if (index >= WORDS.length) {
			finish();
			return;
		}
		if (index > 3) {
			removeTopLine();
		}
		var word = $('<div><nobr>' + WORDS[index] + '</nobr><br/></div>');
		word.hide();
		word.appendTo($('#WordPanel'));
		word.fadeIn(3000, function() {
			showWords(index + 1);
		});
	}

	function removeTopLine() {
		$("#WordPanel div").first().remove();
	}

	function run() {
		$("#background").show();
		$("#WordPanel").show();
		changeBackground(0);
		showWords(0);
	}

	function finish() {
		if (confirm("你同意吗?")) {
			location.href = 'countdown.html';
		} else {
			alert('选择错误:-(');
			finish();
		}
	}

	function showPanel() {
		$("#match-dialog").dialog({
			resizable : false,
			height : 160,
			modal : true,
			draggable : false,
			buttons : {
				"Match" : function() {
					if (!checkMatch()) {
						alert("名字不匹配");
						return;
					}
					$(this).dialog("close");
					run();
				}
			}
		});
	}

	$(function() {
		checkTime();
		ResourceLoader.loadResource(BGIMG, function() {
			$("#loading").hide();
			showPanel();
		});
	});
</script>
</head>
<body>
	<!-- <embed src="res/music.mp3" autostart="true" loop="true" hidden="true" repeat="true" playcount="true"></embed> -->
    <embed src="player.swf?file=res/music&width=150&songVolume=100&backColor=E8E8E8&frontColor=000000&autoStart=true&repeatPlay=true&showDownload=false" 
    	width="0" height="0" quality="high" 
    	pluginspage="http://www.macromedia.com/go/getflashplayer" 
    	type="application/x-shockwave-flash"></embed>
	
	<div id="loading">
		<img src="res/loading.gif">
	</div>
	
	<div id="match-dialog" title="Match" style="display: none;">
		<table>
			<tr>
				<td>他:</td>
				<td><input type="text" id="name1"></td>
			</tr>
			<tr>
				<td>她:</td>
				<td><input type="text" id="name2"></td>
			</tr>
		</table>
	</div>

	<div id="background"
		style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: none;">
		<div id="BGIMGPanel">
			<img src="">
		</div>
	</div>
	<div id="WordPanel" style="display: none;"></div>
</body>
</html>